/**
 * 文章发布modal
 * create by xai on 16/07/2018 5:38 PM
 */
/**
 * 弹出框 - 发布
 */
/**
 * TODO formitem 样式
 */


import React from 'react'
import PropTypes from 'prop-types'
import {TreeSelectCom} from 'components'
import {Form, Radio, Row, Col, Tree, Select, Modal, Icon, Cascader} from 'antd'

const ColProps = {
  xs: 24,
  sm: 12,
  // style: {
  //   marginBottom: 16,
  // },
}

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
}

const TreeNode = Tree.TreeNode
const Option = Select.Option
const FormItem = Form.Item
const RadioButton = Radio.Button
const RadioGroup = Radio.Group

const ArticlePubModal = ({
                           item = {},
                           editorItem = '',
                           modalPubTreeDataToWho,
                           modalPubTreeDataAddress,
                           onOk,
                           onCheck,
                           editorProps,
                           form: {
                             getFieldDecorator,
                             validateFields,
                             getFieldsValue,
                           },
                           ...pubModalProps
                         }) => {


  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
      }
      onOk(data)
    })
  }

  const handleRadioChange = (e) => {
    console.log(e.target.value)
  }

  const modalOpts = {
    ...pubModalProps,
    onOk: handleOk,
  }

  const tree = [{
    id: '1',
    pid: '0',
    value: '',
    label: '上海',
    children: [
      {
        id: '2',
        pid: '1',
        value: '02100',
        label: '上海二',
      },
    ],
  }]

  // 根据 label 查询
  const cascaderSearch = (inputValue, path) => {
    return (path.some(option => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1))
  }

  const cascadeFiledNames = () => {
    return {label: 'label', value: 'code', children: 'children'}
  }

  return (
    <Modal {...modalOpts} >

      <Form>
        {/* <Row gutter={24} type='flex' justify='center'>
          <Col {...ColProps} xl={{span: 20}} md={{span: 20}} id="addressCascader">

            {getFieldDecorator('address', {initialValue: ''})(<Cascader
              style={{width: '100%'}}
              options={tree}
              placeholder="请选择页面及组件"
              onChange={value => onCheck(value)}
              getPopupContainer={() => document.getElementById('addressCascader')}
            />)}

          </Col>
        </Row> */}

        <FormItem
          {...formItemLayout}
          label="发布单位"
        >
          <Row gutter={24} type='flex' justify='left'>
            <Col {...ColProps} xl={{span: 23}} md={{span: 23}} id="toWhoCascader">
              {getFieldDecorator('toWho',
                {
                  initialValue: "",
                  rules: [
                    {
                      required: true,
                      message: "请选择发布单位",
                    },
                  ],
                })(<Cascader
                style={{width: '100%'}}
                // options={modalPubTreeDataToWho}
                options={tree}
                // 加入字段转换
                // fieldNames={{ label: 'label', value: 'code', children: 'children' }}
                placeholder="请选择发布单位"
                expandTrigger="hover"
                showSearch={{ cascaderSearch }}
                popupPlacement={"topLeft"}
                getPopupContainer={() => document.getElementById('toWhoCascader')}
              />)}
            </Col>
          </Row>
        </FormItem>

        <FormItem
          {...formItemLayout}
          label="发布位置"
        >
          <Row gutter={24} type='flex' justify='left'>
            <Col {...ColProps} xl={{span: 23}} md={{span: 23}} id="addressCascader">
              {getFieldDecorator('address',
                {
                  initialValue: "",
                  rules: [
                    {
                      required: true,
                      message: "请选择发布位置",
                    },
                  ],
                })(<Cascader
                style={{width: '100%'}}
                options={modalPubTreeDataAddress}
                // 加入字段转换
                fieldNames={{ label: 'label', value: 'code', children: 'children' }}
                placeholder="请选择页面及组件"
                expandTrigger="hover"
                showSearch={{ cascaderSearch }}
                popupPlacement={"topLeft"}
                getPopupContainer={() => document.getElementById('addressCascader')}
              />)}
            </Col>
          </Row>
        </FormItem>

      </Form>

    </Modal>
  )
}

// ArticlePubModal.propTypes = {

//   type: PropTypes.string,
//   item: PropTypes.object,
//   onOk: PropTypes.func,
// }

export default Form.create()(ArticlePubModal)


